<template>
  <div class="content">
    <div class="city">
      <router-link to="/city">
        <span>杭州</span>
        <van-icon name="play" />
      </router-link>
    </div>
    <van-tabs @click="onClick" v-model="active">
      <van-tab :title="item.text" v-for="item in list" :key="item.id">
      </van-tab>
    </van-tabs>
    <div class="search">
      <router-link to="/search">
        <van-icon name="search" />
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      list: [
        {
          id: 1,
          text: "热映",
          path: "/home/hot",
        },
        {
          id: 2,
          text: "影院",
          path: "/home/cinema",
        },
        {
          id: 3,
          text: "待映",
          path: "/home/coming",
        },
        {
          id: 4,
          text: "经典",
          path: "/home/classic",
        },
      ],
    };
  },
  watch:{
    $route (){
      const { path } = this.$route
      switch (path){
      case '/home/hot':
        this.active = 0;
        break;
        case 'home/cinema':
          this.active = 1;
          break;
      case '/home/coming':
        this.active = 2;
        break;
        case 'home/classic':
          this.active = 3;
          break;
          default:
            this.active = 0;
            break;
      } 
    }
  },
  methods:{
    onClick (index,title){
      this.list.forEach((v,i) => {
        if(title === v.text){
          this.$router.push(v.path)
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/color.scss";
.content {
  width: 100%;
  height: 47px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .city {
    line-height: 40px;
    padding-left: 10px;
    display: flex;
    justify-content: center;
    a {
      display: flex;
      align-items: center;
      i {
        transform: rotate(90deg);
        color: #666;
      }
      span {
        font-size: 15px;
        color: #666;
      }
    }
  }
  .search {
    padding-right: 10px;
    i {
      color: $theme_color;
    }
  }

  .van-tabs {
    flex: 1;
  }
}
</style>